<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/3
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1 class="text-center">查询订单</h1>
<form class="formBox" style="margin-top: 30px;margin-left: 30px">
        订单ID: <input type="text" name="oid" id="oid">
        物品名称: <input type="text" name="oname" id="oname">
        起始时间:<input type="date" name="strDate" id="strDate">
        结束时间:<input type="date" name="endDate" id="endDate">
        单价:<input type="text" name="uprice" id="uprice">
        总价:<input type="text" name="tprice" id="tprice">
        付款状态:<select name="paystate" id="paystate">
            <option value="">不限</option>
            <option value="已付款">钻石</option>
            <option value="未付款">黄金</option>
        </select>

</form>
<table class="msgBox table-hover table table-bordered" border="1px solid"width="100%" style="margin-top: 20px;line-height: 30px;text-align: center" id="msgBox">
<thead>
<tr>
    <td>订单ID</td>
    <td>物品名称</td>
    <td>物品图片</td>
    <td>数量</td>
    <td>单价</td>
    <td>总价</td>
    <td>用户ID</td>
    <td>付款状态</td>
    <td>订单时间</td>
    <td colspan="2">操作</td>
</tr>
</thead>
<tbody></tbody>
</table>

每页显示
<select name="pageSize" id="pageSize">
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="10">10</option>
</select>
条----

当前第<sapn class="pages"></sapn>页
<ul class="pageBox" style="list-style: none;">
</ul>
<hr>
<form action="${pageContext.request.contextPath}/insertDd" method="post" enctype="multipart/form-data">
    图片：<input type="file" name="ordersimg" id="simg">
    <input type="text" placeholder="商品名称" name="oname" id="name">
    <input type="number" placeholder="数量" name="onum" id="num">
    <input type="number" placeholder="单价" name="uprice" id="price">
    <input type="number" placeholder="总价" name="tprice" id="price2">
    <input type="number" placeholder="用户ID" name="userid" id="uid">
    <input type="date" placeholder="订单时间" name="odate" id="data">
    <input type="text" placeholder="付款状态" name="paystate" id="tate">
    <input type="submit" value="添加" id="a"/>
</form>
</body>
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
<script>
    $(function(){
            getOrder();
            x();
            $(".formBox").change(function () {
                getOrder();
            })
            $("#pageSize").change(function () {
                getOrder();
            })
            $("#simg,#name,#num,#price,#price2,#uid,#data,#tate").change(function () {
                $("#a").attr("disabled", false);
            })
    })
    function getOrder(pageNum) {
    $("tbody").empty();
    var url = "${pageContext.request.contextPath}/getOrders";
    var oid = $("#oid").val();
    var oname = $("#oname").val();
    var onum = $("#onum").val();
    var uprice = $("#uprice").val();
    var tprice = $("#tprice").val();
    var userid = $("#userid").val();
    var paystate = $("#paystate").val();
    var odate = $("#odate").val();
    var strDate = $("#strDate").val();
    var endDate = $("#endDate").val();
    var pageSize = $("#pageSize").val();
    var orders  = {
        "oid":oid,
        "oname":oname,
        "onum":onum,
        "uprice":uprice,
        "tprice":tprice,
        "userid":userid,
        "paystate":paystate,
        "odate":odate,
        "strDate":strDate,
        "endDate":endDate,
        "pageSize":pageSize,
        "pageNum":pageNum
    };
    $.ajax({
        url:url,
        method:"post",
        data:orders,
        success:function(data){
            console.log(data)
            var order1 = data.list;
            for(var i = 0;i<order1.length;i++){
                var $tr = $("<tr>");
                $("#msgBox").append($tr);
                var $oid = $("<td>");
                var $oname = $("<td>");
                var $imgtd=$("<td>");
                var $img=$("<img src='"+order1[i].oimg+"' width='30px' height='30px'>")
                $imgtd.append($img);
                var $onum = $("<td>");
                var $uprice = $("<td>");
                var $tprice = $("<td>");
                var $userid = $("<td>");
                var $paystate = $("<td>");
                var $odate = $("<td>");
                var $del =  $("<td>");
                var $upt =  $("<td>");
                var $btn = $("<button>删除</button>");
                var $uptbtn = $("<button>修改</button>");
                $btn.attr("onclick",'deleteOrder('+order1[i].oid+')');
                $del.append($btn);
                $upt.append($uptbtn)
                $oid.html(order1[i].oid);
                $oname.html(order1[i].oname);
                $onum.html(order1[i].onum);
                $uprice.html(order1[i].uprice);
                $tprice.html(order1[i].tprice);
                $userid.html(order1[i].userid);
                $paystate.html(order1[i].paystate);
                $odate.html(order1[i].odate);
                $tr.append($oid).append($oname).append($imgtd).append($onum).append($uprice).append($tprice).append($userid).append($paystate).append($odate).append($del).append($upt);
            }
            makePage(data);
        }
    })
}
function x() {
    $("#a").click(function(){
        if ($("#simg").val() == "") {
            $("#a").attr("disabled", "disabled");
            alert("图片不能为空");
        } else if($("#name").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("商品名称不能为空");
        } else if($("#num").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("数量不能为空");
        } else if($("#price").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("单价不能为空");
        } else if($("#price2").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("总价不能为空");
        } else if($("#uid").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("用户名ID不能为空");
        } else if($("#data").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("时间不能为空");
        }else if($("#tate").val() == ""){
            $("#a").attr("disabled", "disabled");
            alert("付款状态不能为空");
        }
    })
}
    function deleteOrder(oid) {
    var url = "${pageContext.request.contextPath}/orders/"+oid;
    $.ajax({
        url:url,
        method:"DELETE",
        data: {"oid":oid},
        success:function (data) {
            if(data=1){
                alert("删除成功");
                getOrder();
            }
        }
    })
}
    function makePage(data) {
    $(".pageBox").empty();
    var isFirstPage = data.isFirstPage;
    var isLastPage = data.isLastPage;
    var hasNextPage = data.hasNextPage;
    var hasPreviousPage = data.hasPreviousPage;
    var navigatePageNums = data.navigatepageNums;
    var currentPageNum = parseInt(data.pageNum);
    $(".pages").html(currentPageNum);
    console.log(data)
    console.log(currentPageNum)
    if (isFirstPage != true) {
        $li = $("<li></li>");
        $a = $("<a href='#'></a>");
        $li.append($a);
        $a.attr("onclick", "getOrder(" + 1 + ")").text("首页");
        $(".pageBox").append($li);
    }
    if (hasPreviousPage == true) {
        var num = currentPageNum - 1;
        $li = $("<li></li>");
        $a = $("<a href='#'></a>");
        $li.append($a);
        $a.attr("onclick", "getOrder(" + num + ")").text("上一页");
        $(".pageBox").append($li);
    }
    for (var i = 0; i < navigatePageNums.length; i++) {
        var num = navigatePageNums[i];
        $li = $("<li></li>");
        $a = $("<a href='#'></a>");
        $li.append($a);
        $a.attr("onclick", "getOrder(" + num + ")").text(num);
        $(".pageBox").append($li);
    }
    if (isLastPage != true) {
        var lastPages = parseInt(data.pages);
        $li = $("<li></li>");
        $a = $("<a href='#'></a>");
        $li.append($a);
        $a.attr("onclick", "getOrder(" + lastPages + ")").text("尾页");
        $(".pageBox").append($li);

    }
    if (hasNextPage == true) {
        var num = currentPageNum + 1;
        $li = $("<li></li>");
        $a = $("<a href='#'></a>");
        $li.append($a);
        $a.attr("onclick", "getOrder(" + num + ")").text("下一页");
        $(".pageBox").append($li);
    }
}
</script>
</html>
